<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  
  <link rel="stylesheet" href="css/app.css" type="text/css" />
  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
  <section class="vbox">
    <header class="bg-dark dk header navbar navbar-fixed-top-xs">
      <div class="navbar-header aside-md">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
          <i class="fa fa-bars"></i>
        </a>
        <a href="#" class="navbar-brand" data-toggle="fullscreen"><img src="images/logo.png" class="m-r-sm">Notebook</a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
          <i class="fa fa-cog"></i>
        </a>
      </div>
      <ul class="nav navbar-nav hidden-xs">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle dker" data-toggle="dropdown">
            <i class="fa fa-building-o"></i> 
            <span class="font-bold">Activity</span>
          </a>
          <section class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
            <div class="wrapper lter m-t-n-xs">
              <a href="#" class="thumb pull-left m-r">
                <img src="images/avatar.jpg" class="img-circle">
              </a>
              <div class="clear">
                <a href="#"><span class="text-white font-bold">@Mike Mcalidek</a></span>
                <small class="block">Art Director</small>
                <a href="#" class="btn btn-xs btn-success m-t-xs">Upgrade</a>
              </div>
            </div>
            <div class="row m-l-none m-r-none m-b-n-xs text-center">
              <div class="col-xs-4">
                <div class="padder-v">
                  <span class="m-b-xs h4 block text-white">245</span>
                  <small class="text-muted">Followers</small>
                </div>
              </div>
              <div class="col-xs-4 dk">
                <div class="padder-v">
                  <span class="m-b-xs h4 block text-white">55</span>
                  <small class="text-muted">Likes</small>
                </div>
              </div>
              <div class="col-xs-4">
                <div class="padder-v">
                  <span class="m-b-xs h4 block text-white">2,035</span>
                  <small class="text-muted">Photos</small>
                </div>
              </div>
            </div>
          </section>
        </li>
        <li>
          <div class="m-t m-l">
            <a href="price.html" class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade"><i class="fa fa-long-arrow-up"></i></a>
          </div>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
        <li class="hidden-xs">
          <a href="#" class="dropdown-toggle dk" data-toggle="dropdown">
            <i class="fa fa-bell"></i>
            <span class="badge badge-sm up bg-danger m-l-n-sm count">2</span>
          </a>
          <section class="dropdown-menu aside-xl">
            <section class="panel bg-white">
              <header class="panel-heading b-light bg-light">
                <strong>You have <span class="count">2</span> notifications</strong>
              </header>
              <div class="list-group list-group-alt animated fadeInRight">
                <a href="#" class="media list-group-item">
                  <span class="pull-left thumb-sm">
                    <img src="images/avatar.jpg" alt="John said" class="img-circle">
                  </span>
                  <span class="media-body block m-b-none">
                    Use awesome animate.css<br>
                    <small class="text-muted">10 minutes ago</small>
                  </span>
                </a>
                <a href="#" class="media list-group-item">
                  <span class="media-body block m-b-none">
                    1.0 initial released<br>
                    <small class="text-muted">1 hour ago</small>
                  </span>
                </a>
              </div>
              <footer class="panel-footer text-sm">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
              </footer>
            </section>
          </section>
        </li>
        <li class="dropdown hidden-xs">
          <a href="#" class="dropdown-toggle dker" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i></a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <form role="search">
                <div class="form-group wrapper m-b-none">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn">
                      <button type="submit" class="btn btn-info btn-icon"><i class="fa fa-search"></i></button>
                    </span>
                  </div>
                </div>
              </form>
            </section>
          </section>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="thumb-sm avatar pull-left">
              <img src="images/avatar.jpg">
            </span>
            John.Smith <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <span class="arrow top"></span>
            <li>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.html">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
            </li>
          </ul>
        </li>
      </ul>      
    </header>
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-light lter b-r aside-md hidden-print hidden-xs" id="nav">          
          <section class="vbox">
            <header class="header bg-primary lter text-center clearfix">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-dark btn-icon" title="New project"><i class="fa fa-plus"></i></button>
                <div class="btn-group hidden-nav-xs">
                  <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                    Switch Project
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu text-left">
                    <li><a href="#">Project</a></li>
                    <li><a href="#">Another Project</a></li>
                    <li><a href="#">More Projects</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <section class="w-f scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="5px" data-color="#333333">
                
                <!-- nav -->
                <nav class="nav-primary hidden-xs">
                  <ul class="nav">
                    <li >
                      <a href="index.html"  >
                        <i class="fa fa-dashboard icon">
                          <b class="bg-danger"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>Workset</span>
                      </a>
                      <ul class="nav lt">
                        <li >
                          <a href="index.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Dashboard v1</span>
                          </a>
                        </li>
                        <li >
                          <a href="dashboard.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Dashboard v2</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li >
                      <a href="#layout"  >
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>Layouts</span>
                      </a>
                      <ul class="nav lt">
                        <li >
                          <a href="layout-c.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Color option</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-r.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Right nav</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-h.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Hbox Layout</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-boxed.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Boxed Layout</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-fluid.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Fluid Layout</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li  class="active">
                      <a href="#uikit"   class="active">
                        <i class="fa fa-flask icon">
                          <b class="bg-success"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>UI kit</span>
                      </a>
                      <ul class="nav lt">
                        <li >
                          <a href="buttons.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Buttons</span>
                          </a>
                        </li>
                        <li >
                          <a href="icons.html" >                            
                            <b class="badge bg-info pull-right">369</b>                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Icons</span>
                          </a>
                        </li>
                        <li >
                          <a href="grid.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Grid</span>
                          </a>
                        </li>
                        <li >
                          <a href="widgets.html" >                            
                            <b class="badge  pull-right">8</b>                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Widgets</span>
                          </a>
                        </li>
                        <li >
                          <a href="components.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Components</span>
                          </a>
                        </li>
                        <li >
                          <a href="list.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>List group</span>
                          </a>
                        </li>
                        <li >
                          <a href="#table" >                            
                            <i class="fa fa-angle-down text"></i>
                            <i class="fa fa-angle-up text-active"></i>
                            <span>Table</span>
                          </a>
                          <ul class="nav bg">
                            <li >
                              <a href="table-static.html" >
                                <i class="fa fa-angle-right"></i>
                                <span>Table static</span>
                              </a>
                            </li>
                            <li >
                              <a href="table-datatable.html" >
                                <i class="fa fa-angle-right"></i>
                                <span>Datatable</span>
                              </a>
                            </li>
                            <li >
                              <a href="table-datagrid.html" >
                                <i class="fa fa-angle-right"></i>
                                <span>Datagrid</span>
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li  class="active">
                          <a href="#form"  class="active">                            
                            <i class="fa fa-angle-down text"></i>
                            <i class="fa fa-angle-up text-active"></i>
                            <span>Form</span>
                          </a>
                          <ul class="nav bg">
                            <li >
                              <a href="form-elements.html" >
                                <i class="fa fa-angle-right"></i>
                                <span>Form elements</span>
                              </a>
                            </li>
                            <li  class="active">
                              <a href="form-validation.html"  class="active">
                                <i class="fa fa-angle-right"></i>
                                <span>Form validation</span>
                              </a>
                            </li>
                            <li >
                              <a href="form-wizard.html" >
                                <i class="fa fa-angle-right"></i>
                                <span>Form wizard</span>
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li >
                          <a href="chart.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Chart</span>
                          </a>
                        </li>
                        <li >
                          <a href="fullcalendar.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Fullcalendar</span>
                          </a>
                        </li>
                        <li >
                          <a href="portlet.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Portlet</span>
                          </a>
                        </li>
                        <li >
                          <a href="timeline.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Timeline</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li >
                      <a href="#pages"  >
                        <i class="fa fa-file-text icon">
                          <b class="bg-primary"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>Pages</span>
                      </a>
                      <ul class="nav lt">
                        <li >
                          <a href="gallery.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Gallery</span>
                          </a>
                        </li>
                        <li >
                          <a href="profile.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Profile</span>
                          </a>
                        </li>
                        <li >
                          <a href="invoice.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Invoice</span>
                          </a>
                        </li>
                        <li >
                          <a href="intro.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Intro</span>
                          </a>
                        </li>
                        <li >
                          <a href="master.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Master</span>
                          </a>
                        </li>
                        <li >
                          <a href="gmap.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Google Map</span>
                          </a>
                        </li>
                        <li >
                          <a href="jvectormap.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Vector Map</span>
                          </a>
                        </li>
                        <li >
                          <a href="signin.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Signin</span>
                          </a>
                        </li>
                        <li >
                          <a href="signup.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>Signup</span>
                          </a>
                        </li>
                        <li >
                          <a href="404.html" >                                                        
                            <i class="fa fa-angle-right"></i>
                            <span>404</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li >
                      <a href="mail.html"  >
                        <b class="badge bg-danger pull-right">3</b>
                        <i class="fa fa-envelope-o icon">
                          <b class="bg-primary dker"></b>
                        </i>
                        <span>Message</span>
                      </a>
                    </li>
                    <li >
                      <a href="notebook.html"  >
                        <i class="fa fa-pencil icon">
                          <b class="bg-info"></b>
                        </i>
                        <span>Notes</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <!-- / nav -->
              </div>
            </section>
            
            <footer class="footer lt hidden-xs b-t b-light">
              <div id="chat" class="dropup">
                <section class="dropdown-menu on aside-md m-l-n">
                  <section class="panel bg-white">
                    <header class="panel-heading b-b b-light">Active chats</header>
                    <div class="panel-body animated fadeInRight">
                      <p class="text-sm">No active chats.</p>
                      <p><a href="#" class="btn btn-sm btn-default">Start a chat</a></p>
                    </div>
                  </section>
                </section>
              </div>
              <div id="invite" class="dropup">                
                <section class="dropdown-menu on aside-md m-l-n">
                  <section class="panel bg-white">
                    <header class="panel-heading b-b b-light">
                      John <i class="fa fa-circle text-success"></i>
                    </header>
                    <div class="panel-body animated fadeInRight">
                      <p class="text-sm">No contacts in your lists.</p>
                      <p><a href="#" class="btn btn-sm btn-facebook"><i class="fa fa-fw fa-facebook"></i> Invite from Facebook</a></p>
                    </div>
                  </section>
                </section>
              </div>
              <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-default btn-icon">
                <i class="fa fa-angle-left text"></i>
                <i class="fa fa-angle-right text-active"></i>
              </a>
              <div class="btn-group hidden-nav-xs">
                <button type="button" title="Chats" class="btn btn-icon btn-sm btn-default" data-toggle="dropdown" data-target="#chat"><i class="fa fa-comment-o"></i></button>
                <button type="button" title="Contacts" class="btn btn-icon btn-sm btn-default" data-toggle="dropdown" data-target="#invite"><i class="fa fa-facebook"></i></button>
              </div>
            </footer>
          </section>
        </aside>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
            <section class="scrollable padder">
              <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#">UI kit</a></li>
                <li><a href="#">Form</a></li>
                <li class="active">Validation</li>
              </ul>
              <div class="m-b-md">
                <h3 class="m-b-none">Validation</h3>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <form data-validate="parsley">
                    <section class="panel panel-default">
                      <header class="panel-heading">
                        <span class="h4">Register</span>
                      </header>
                      <div class="panel-body">
                        <p class="text-muted">Please fill the information to continue</p>
                        <div class="form-group">
                          <label>Username</label>
                          <input type="text" class="form-control" data-required="true">
                          <span>abc</span>                 
                        </div>
                        <div class="form-group">
                          <label>Email</label>
                          <input type="text" class="form-control" data-type="email" data-required="true">                        
                        </div>
                        <div class="form-group pull-in clearfix">
                          <div class="col-sm-6">
                            <label>Enter password</label>
                            <input type="password" class="form-control" data-required="true" id="pwd">   
                          </div>
                          <div class="col-sm-6">
                            <label>Confirm password</label>
                            <input type="password" class="form-control" data-equalto="#pwd" data-required="true">      
                          </div>   
                        </div>
                        <div class="form-group">
                          <label>Phone</label>
                          <input type="text" class="form-control" data-type="phone" placeholder="(XXX) XXXX XXX" data-required="true">
                        </div>
                        <div class="checkbox">
                          <label>
                            <input type="checkbox" name="check" checked data-required="true"> I agree to the <a href="#" class="text-info">Terms of Service</a>
                          </label>
                        </div>
                      </div>
                      <footer class="panel-footer text-right bg-light lter">
                        <button type="submit" class="btn btn-success btn-s-xs">Submit</button>
                      </footer>
                    </section>
                  </form>
                </div>
                <div class="col-sm-6">
                  <form data-validate="parsley">
                    <section class="panel panel-default">
                      <header class="panel-heading">
                        <span class="h4">Contact</span>
                      </header>
                      <div class="panel-body">
                        <p class="text-muted">Need support? please fill the fields below.</p>                        
                          <div class="form-group pull-in clearfix">
                            <div class="col-sm-6">
                              <label>Your name</label>
                              <input type="text" class="form-control" placeholder="Name" data-required="true">
                            </div>
                            <div class="col-sm-6">
                              <label>Email</label>
                              <input type="email" class="form-control" placeholder="Enter email" data-required="true">
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Your website</label>
                            <input type="text" data-type="url"  data-required="true" class="form-control" placeholder="Your website url">
                          </div>
                          <div class="form-group">
                            <label>Message</label>
                            <textarea class="form-control" rows="6" data-minwords="6" data-required="true" placeholder="Type your message"></textarea>
                          </div>
                      </div>
                      <footer class="panel-footer text-right bg-light lter">
                        <button type="submit" class="btn btn-success btn-s-xs">Submit</button>
                      </footer>
                    </section>
                  </form>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <form class="form-horizontal" data-validate="parsley">
                    <section class="panel panel-default">
                      <header class="panel-heading">
                        <strong>Basic constraints</strong>
                      </header>
                      <div class="panel-body">                    
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Required</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" data-required="true" placeholder="required field">
                            <select data-required="true" class="form-control m-t">
                                <option value="">Please choose</option>
                                <option value="foo">Foo</option>
                                <option value="bar">Bar</option>
                            </select>
                            <label class="checkbox">
                              <input type="checkbox" name="inlineCheckbox1" value="option1" data-required="true" data-error-message="You must agree to the site policy."> Agree to the policy
                            </label>
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Not blank</label>
                          <div class="col-sm-9">
                            <input type="text" data-notblank="true" class="form-control" placeholder="not blank field">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Min Length</label>
                          <div class="col-sm-9">
                            <input type="text" data-minlength="6" class="form-control" placeholder="minlength = 6">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Max Length</label>
                          <div class="col-sm-9">
                            <input type="text" data-maxlength="6" class="form-control" placeholder="maxlength = 6">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Range Length</label>
                          <div class="col-sm-9">
                            <input type="text" data-rangelength="[5,10]" class="form-control" placeholder="data-rangelength = [5,10]">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Min</label>
                          <div class="col-sm-9">
                            <input type="text" data-min="6" class="form-control" placeholder="min = 6">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Max</label>
                          <div class="col-sm-9">
                            <input type="text" data-max="100" class="form-control" placeholder="max = 100">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Range</label>
                          <div class="col-sm-9">
                            <input type="text" data-range="[6, 100]" class="form-control" placeholder="data-range = [6, 100]">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">RegExp</label>
                          <div class="col-sm-9">
                            <input type="text" data-regexp="#[A-Fa-f0-9]{6}" class="form-control" placeholder="hexa color code">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Equal To</label>
                          <div class="col-sm-9">
                            <div class="row">
                              <div class="col-sm-6"><input type="text" value="foo" id="foo" class="form-control"></div>
                              <div class="col-sm-6"><input type="text" data-equalto="#foo" placeholder="equal to foo" class="form-control"></div>
                            </div>                            
                          </div>
                        </div>
                      </div>
                      <footer class="panel-footer text-right bg-light lter">
                        <button type="submit" class="btn btn-success btn-s-xs">Submit</button>
                      </footer>
                    </section>
                  </form>
                </div>
                <div class="col-sm-6">
                  <form class="form-horizontal" data-validate="parsley">
                    <section class="panel panel-default">
                      <header class="panel-heading">
                        <strong>Type constraints</strong>
                      </header>
                      <div class="panel-body">                    
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Email</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" data-type="email" data-required="true" placeholder="email">    
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Url</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="url" class="form-control" placeholder="url">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Url strict</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="urlstrict" class="form-control" placeholder="urlstrict">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Digits</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="digits" class="form-control" placeholder="digits">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Number</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="number" class="form-control" placeholder="number">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Alphanum</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="alphanum" class="form-control" placeholder="alphanumeric string">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Date Iso</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="dateIso" class="form-control" placeholder="YYYY-MM-DD">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Phone</label>
                          <div class="col-sm-9">
                            <input type="text" data-type="phone" class="form-control" placeholder="(XXX) XXXX XXX">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Min Words</label>
                          <div class="col-sm-9">
                            <input type="text" data-minwords="6" class="form-control" placeholder="min 6 words">
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Max Words</label>
                          <div class="col-sm-9">
                            <input type="text" data-maxwords="6" class="form-control" placeholder="max 6 words">                         
                          </div>
                        </div>
                        <div class="line line-dashed line-lg pull-in"></div>
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Range Words</label>
                          <div class="col-sm-9">
                            <input type="text" data-rangewords="[6,10]" class="form-control" placeholder="min 6 words & max 10 words">
                          </div>
                        </div>
                      </div>
                      <footer class="panel-footer text-right bg-light lter">
                        <button type="submit" class="btn btn-success btn-s-xs">Submit</button>
                      </footer>
                    </section>
                  </form>
                </div>
              </div>
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </section>
        <aside class="bg-light lter b-l aside-md hide" id="notes">
          <div class="wrapper">Notification</div>
        </aside>
      </section>
    </section>
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script> 
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
  <!-- parsley -->
<script src="js/parsley/parsley.min.js"></script>
<script src="js/parsley/parsley.extend.js"></script>
  <script src="js/app.plugin.js"></script>
</body>
</html>